<template>
  <div>
    <van-dialog
      v-model:show="showDialog"
      :showConfirmButton="false"
      :showCancelButton="false"
    >
      <div
        class="c-linear-D5E2FF p-20 pb-30 w-325 rounded-15 text-333333 relative"
      >
        <svg-icon
          name="icon-shanchuxian"
          :size="14"
          color="#333"
          class="absolute right-20 top-15"
          @click="showDialog = false"
        />
        <div class="text-16 font-bold text-center">
          <span class="text-with-underline">精彩作品</span>
          <span>，值得期待</span>
        </div>
        <div class="mt-20 flex justify-center items-center text-14">
          <template
            v-if="
              videoInfoListForIdsParam.videoStatus ==
                HUMAN_IMG_STATUS_ENUM.MAKING ||
              videoInfoListForIdsParam.videoStatus ==
                HUMAN_IMG_STATUS_ENUM.COMMIT
            "
          >
            努力生成中，可以到
          </template>
          <template
            v-if="
              videoInfoListForIdsParam.videoStatus ==
              HUMAN_IMG_STATUS_ENUM.SUCCESS
            "
          >
            <svg-icon
              class="mr-4"
              name="icon-chenggong"
              :size="14"
              color="#17B459"
            />
            生成成功，可以到
          </template>
          <template
            v-if="
              videoInfoListForIdsParam.videoStatus == HUMAN_IMG_STATUS_ENUM.FAIL
            "
          >
            <svg-icon
              class="mr-4"
              name="icon-shibai"
              :size="14"
              color="#FF4A35"
            />
            视频生成失败，可以到
          </template>
          <span
            class="px-5 text-2614FF underline"
            @click="navigateTo('History')"
            >我的创作</span
          >
          中查看
        </div>
        <div
          class="w-full mt-10 relative rounded-10 overflow-hidden flex justify-center items-center"
        >
          <img
            class="w-200 h-200 object-contain"
            :src="videoInfoListForIdsParam.humanImageUrl"
            alt="视频图片"
          />
          <div
            v-if="
              videoInfoListForIdsParam.videoStatus ==
              HUMAN_IMG_STATUS_ENUM.MAKING
            "
            class="c-translucent-balck50 c-animation-opacity size-full left-0 top-0 absolute text-white flex flex-col justify-center items-center"
          >
            <view class="loading-circle w-42 h-42 rounded-[50%]" />
            <view class="mt-5 text-14"
              >{{ videoInfoListForIdsParam.videoProgress }}%</view
            >
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, watch } from "vue";
import { HUMAN_IMG_STATUS_ENUM } from "@/enums";
import {
  getVideoInfoListForIds,
  VideoInfoListForIdsInfoData
} from "@/api/CreatePictureVideo";
import router from "@/router";

defineOptions({
  name: "CreateVideoTips"
});

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  videoId: {
    type: String,
    default: ""
  }
});

// 父组件调用emit方法，通知子组件
const emit = defineEmits(["update:visible"]);

// 弹窗内部状态
const showDialog = ref(props.visible);

// 轮询定时器
const pollTimer = ref<NodeJS.Timeout | null>(null);

// 监听父组件传入的visible变化
watch(
  () => props.visible,
  newVal => {
    showDialog.value = newVal;
  }
);

// 监听弹窗内部状态变化，通知父组件
watch(showDialog, newVal => {
  if (!newVal) {
    emit("update:visible", false);
    // 弹窗关闭时停止轮询
    stopPolling();
  }
});
// 跳转页面
const navigateTo = (routeName: string) => {
  router.replace({
    name: routeName
  });
};

// 视频状态
const videoInfoListForIdsParam = ref<VideoInfoListForIdsInfoData>({
  humanImageUrl: "",
  humanType: "",
  videoProgress: 0,
  videoStatus: ""
});

// 获取视频信息列表
const videoInfoListForIdsList = ref<VideoInfoListForIdsInfoData[]>([]);

// 停止轮询
const stopPolling = () => {
  if (pollTimer.value) {
    clearInterval(pollTimer.value);
    pollTimer.value = null;
  }
};

// 获取视频信息
const getVideoInfoListForIdsPort = async () => {
  try {
    videoInfoListForIdsList.value = await getVideoInfoListForIds({
      idList: [props.videoId]
    });
    if (videoInfoListForIdsList.value.length === 0) return;
    videoInfoListForIdsParam.value = videoInfoListForIdsList.value[0];
    // 如果状态不是SUCCESS或FAIL，开启轮询
    if (
      videoInfoListForIdsParam.value.videoStatus !==
        HUMAN_IMG_STATUS_ENUM.SUCCESS &&
      videoInfoListForIdsParam.value.videoStatus !== HUMAN_IMG_STATUS_ENUM.FAIL
    ) {
      startPolling();
    } else {
      // 如果状态已完成，停止轮询
      stopPolling();
    }
  } catch (error) {
    console.error("获取视频信息失败:", error);
    stopPolling();
  }
};

// 开始轮询
const startPolling = () => {
  // 先停止之前的轮询
  stopPolling();

  // 设置1.5秒间隔的轮询
  pollTimer.value = setInterval(() => {
    getVideoInfoListForIdsPort();
  }, 1500);
};

onMounted(() => {
  getVideoInfoListForIdsPort();
});

// 组件卸载时清除定时器
onUnmounted(() => {
  stopPolling();
});
</script>

<style scoped></style>
